<script>
  import movable from '../utils/movable'
</script>

<style>
  div {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: blue;
    text-align: center;
    line-height: 100px;
    color: #fff;
    user-select: none;
    cursor: move;
  }
</style>

<!-- 通过 use 指令将 movable 应用到元素 div -->
<div
  use:movable
  on:movestart={e => console.log(`start => x: ${e.detail.x}, y: ${e.detail.y}`)}
  on:moving={e => console.log(`moving => x: ${e.detail.x}, y: ${e.detail.y}`)}
  on:moveend={() => console.log('move end...')}
>Box</div>
